.datepicker-input-group.u-input-group {
    display: inline-block;
    border-radius: 3px;
    z-index: 1;
    input {
        border-color: #d0d0d0;
        &.u-form-control {
            padding: 0 8px;
            font-size: 13px !important;
            color: #111111;
            cursor: pointer;
            &::-webkit-input-placeholder {
                color: #ccc;
            }
        }
        &:hover {
            // 添加日期组件聚焦时样式  --bbqin
            //border-color: #999;
            border-color: @border-color-hover;
        }
        &:focus {
            // 添加日期组件聚焦时样式  --bbqin
            //border-color: #999;
            border-color: @border-color-focus;
        }
    }
}
.u-form-control-wrapper {
    width: 100%;
    display: inline-block;
    position: relative;
    .nc-input {
        height: 100%;
    }
    .datepicker-input-required-tag {
        position: absolute;
        left: 2px;
        top: 50%;
        z-index: 3;
        transform: translate3d(0, -50%, 0);
        color: #ef0012;
        font-size: 13px;
    }
    .nc-datepicker-input-wrap{
        // display: inline-block;
        .nc-datepicker-del-i {
            position: absolute;
            z-index: 1;
            top: 0;
            right: 22px;
            width: 18px;
            height: 26px;
            line-height: 28px;
            text-align: center;
            border-radius: 100%;
            color: #ccc;
            margin-left: 3px;
            font-style: normal;
            cursor: pointer;
            font-size: 16px;
            transition: color 0.3s;
            &:hover {
                color: #aaa;
            }
            display: none;
        }
        &:hover {
            .nc-datepicker-del-i {
                display: inline-block;
            }
        }
    }
    .u-input-group.simple {
        .u-input-group-btn {
            pointer-events: none;
            display: flex;
            align-items: center;
            top: 2px;
            right: 2px; // 各个datepicker中有大量重复样式  还有important  并不能轻易使用

            i.iconfont {
                font-size: 14px;
                color: #999;
            }
            i:before {
                font-family: "iconfont";

                //content:'\e608';
            }

            i.uf-close-c{
                font-size: 14px;
                color: #999;
                font-family: "iconfont" !important;
                opacity: 1;
                &:before{
                    font-family: "iconfont";
                    content:"\e6cd";
                }
            }
        }
    }
}

// 样式覆盖
.rc-calendar {
    @calendarSelectedColor: #1878ff;
    @calendarCellDisabledColor: #f3f3f3;
    @calendarHoverColor: #23c0fa;
    @calendarPanelColor: #e0f5ff;
    @calendarBtnDisableColor: #a5adba;

    .rc-calendar-header > a:hover {
        cursor: pointer;
        color: @calendarHoverColor;
    }

    .rc-calendar-year-select:hover,
    .rc-calendar-month-select:hover,
    .rc-calendar-day-select:hover {
        cursor: pointer;
        color: @calendarHoverColor;
    }

    .rc-calendar-prev-month-btn:hover,
    .rc-calendar-next-month-btn:hover,
    .rc-calendar-prev-year-btn:hover,
    .rc-calendar-next-year-btn:hover {
        color: @calendarHoverColor;
    }

    .rc-calendar-date:hover {
        background: @calendarPanelColor;
        cursor: pointer;
    }
    .rc-calendar-selected-day .rc-calendar-date {
        background: @calendarSelectedColor;
        color: #fff;
    }
    .rc-calendar-selected-date .rc-calendar-date {
        background: @calendarSelectedColor;
        color: #fff;
    }
    .rc-calendar-selected-date .rc-calendar-date:hover {
        background: @calendarSelectedColor;
    }
    .rc-calendar-selected-date.rc-calendar-today .rc-calendar-date,
    .rc-calendar-today.rc-calendar-selected-day .rc-calendar-date {
        color: #fff;
    }
    .rc-calendar-today .rc-calendar-date {
        border: 1px solid @calendarSelectedColor;
        color: @calendarSelectedColor;
    }
    .rc-calendar-disabled-cell .rc-calendar-date {
        cursor: not-allowed;
        color: #bcbcbc;
        background: @calendarCellDisabledColor;
        border-radius: 0;
        width: auto;
    }
    .rc-calendar-disabled-cell .rc-calendar-date:hover {
        background: @calendarCellDisabledColor;
    }

    .rc-calendar-last-month-cell .rc-calendar-date,
    .rc-calendar-next-month-btn-day .rc-calendar-date {
        color: @calendarBtnDisableColor;
    }
    .rc-calendar-footer {
        border-top: 1px solid #ccc;
        padding: 10px 0;
        text-align: center;
        position: relative;
    }

    .rc-calendar-today-btn,
    .rc-calendar-ok-btn,
    .rc-calendar-time-picker-btn {
        display: inline-block;
        text-align: center;
        // color: #f46830;
        color: #474d54;
    }
    .rc-calendar-today-btn:hover,
    .rc-calendar-ok-btn:hover,
    .rc-calendar-time-picker-btn:hover {
        cursor: pointer;
        // color: @calendarHoverColor;
        color: #fb8d47;
    }
    .rc-calendar-today-btn-disabled,
    .rc-calendar-ok-btn-disabled,
    .rc-calendar-time-picker-btn-disabled {
        color: @calendarBtnDisableColor;
    }
    .rc-calendar-today-btn-disabled:hover,
    .rc-calendar-ok-btn-disabled:hover,
    .rc-calendar-time-picker-btn-disabled:hover {
        color: @calendarBtnDisableColor;
    }

    .rc-calendar-time-input:hover {
        border-color: @calendarHoverColor;
    }
    .rc-calendar-time-input:focus {
        border-color: @calendarHoverColor;
        box-shadow: 0 0 3px @calendarHoverColor;
    }
    .rc-calendar-time-panel-time:hover {
        background: @calendarPanelColor;
        cursor: pointer;
    }
    .rc-calendar-time-panel-selected-cell .rc-calendar-time-panel-time {
        background: @calendarSelectedColor;
        color: #fff;
    }
    .rc-calendar-time-panel-selected-cell .rc-calendar-time-panel-time:hover {
        background: @calendarSelectedColor;
        color: #fff;
    }

    .rc-calendar-month-panel-header > a:hover {
        cursor: pointer;
        color: @calendarHoverColor;
    }

    .rc-calendar-month-panel-cell .rc-calendar-month-panel-month:hover {
        background: @calendarPanelColor;
        cursor: pointer;
    }
    .rc-calendar-month-panel-cell-disabled .rc-calendar-month-panel-month {
        color: #bfbfbf;
    }
    .rc-calendar-month-panel-cell-disabled
        .rc-calendar-month-panel-month:hover {
        background: white;
        cursor: not-allowed;
    }
    .rc-calendar-month-panel-selected-cell .rc-calendar-month-panel-month {
        background: @calendarSelectedColor;
        color: #fff;
    }
    .rc-calendar-month-panel-selected-cell
        .rc-calendar-month-panel-month:hover {
        background: @calendarSelectedColor;
        color: #fff;
    }

    .rc-calendar-year-panel-header > a:hover {
        cursor: pointer;
        color: @calendarHoverColor;
    }

    .rc-calendar-year-panel-year:hover {
        background: @calendarPanelColor;
        cursor: pointer;
    }
    .rc-calendar-year-panel-selected-cell .rc-calendar-year-panel-year {
        background: @calendarSelectedColor;
        color: #fff;
    }
    .rc-calendar-year-panel-selected-cell .rc-calendar-year-panel-year:hover {
        background: @calendarSelectedColor;
        color: #fff;
    }

    .rc-calendar-decade-panel-header > a:hover {
        cursor: pointer;
        color: @calendarHoverColor;
    }

    .rc-calendar-decade-panel-decade:hover {
        background: @calendarPanelColor;
        cursor: pointer;
    }
    .rc-calendar-decade-panel-selected-cell .rc-calendar-decade-panel-decade {
        background: @calendarSelectedColor;
        color: #fff;
    }
    .rc-calendar-decade-panel-selected-cell
        .rc-calendar-decade-panel-decade:hover {
        background: @calendarSelectedColor;
        color: #fff;
    }

    .rc-calendar-full-header-switcher-normal:hover {
        border-color: @calendarHoverColor;
        box-shadow: 0 0 2px rgba(45, 183, 245, 0.8);
        cursor: pointer;
    }
    .rc-calendar-full-header-switcher-focus {
        border-color: @calendarSelectedColor;
        background-color: @calendarSelectedColor;
        color: #fff;
    }

    .rc-calendar-full-header-switcher > span {
        float: left;
        height: 28px;
        line-height: 24px;
        border: 1px solid #d9d9d9;
        padding: 0 10px;
        color: #666;
    }

    .rc-calendar-fullscreen .rc-calendar-cell .rc-calendar-date,
    .rc-calendar-fullscreen
        .rc-calendar-month-panel-cell
        .rc-calendar-month-panel-month {
        display: block;
        height: 116px;
        width: auto;
        border-radius: 0;
        margin: 0 4px;
        border: none;
        border-top: 2px solid #eee;
        text-align: right;
        padding-right: 8px;
    }
    .rc-calendar-fullscreen .rc-calendar-selected-day .rc-calendar-date,
    .rc-calendar-fullscreen
        .rc-calendar-month-panel-selected-cell
        .rc-calendar-month-panel-month {
        background-color: @calendarPanelColor;
        color: #666;
    }
    .rc-calendar-fullscreen .rc-calendar-today .rc-calendar-date,
    .rc-calendar-fullscreen
        .rc-calendar-month-panel-selected-cell
        .rc-calendar-month-panel-month {
        border-top-color: @calendarSelectedColor;
        color: @calendarSelectedColor;
    }

    .rc-select-focused .rc-select-selection {
        border-color: @calendarHoverColor;
        box-shadow: 0 0 2px rgba(45, 183, 245, 0.8);
    }
    .rc-select-enabled .rc-select-selection:hover {
        border-color: @calendarHoverColor;
        box-shadow: 0 0 2px rgba(45, 183, 245, 0.8);
    }
    .rc-select-enabled .rc-select-selection:active {
        border-color: #2db7f5;
    }

    .rc-select-disabled {
        color: #ccc;
        cursor: not-allowed;
    }
    .rc-select-disabled .rc-select-selection--single,
    .rc-select-disabled .rc-select-selection__choice__remove {
        cursor: not-allowed;
        color: #ccc;
    }
    .rc-select-disabled .rc-select-selection--single:hover,
    .rc-select-disabled .rc-select-selection__choice__remove:hover {
        cursor: not-allowed;
        color: #ccc;
    }

    // 函数规整  -- bbqin
    .border-top() {
        border-top: 1px solid #dee0e3;
    }
    .rc-calendar-footer {
        padding: 0;
        .u-row {
            padding-top: 4px;
            margin: 0;
            margin-bottom: 16px;
        }
        .fun-plan-area {
            margin-top: 12px;
            &.text-right {
                text-align: right;
            }
            &.text-left {
                text-align: left;
            }
            span {
                cursor: pointer;
                color: blue;
                display: inline-block;
                padding: 6px 10px;
                font-size: 14px;
                color: #1878ff;
                background: #e6f7ff;
                border-radius: 3px;
                border: 1px solid #1878ff;
                line-height: 1;
                &:hover,
                &.select {
                    color: #0055cc;
                    background: rgba(0, 85, 204, 0.2);
                    border-color: #0055cc;
                }
            }
        }
        .fun-split-row {
            .border-top;
            margin-top: 16px;
            margin-bottom: 4px;
        }
        .rc-calendar-footer-btn {
            //padding: 10px 12px 10px 0;
            padding:0;
            display: block;
        }
        .u-row + .rc-calendar-footer-btn {
            .border-top;
            margin-top: 16px;
        }
    }
    // 日历输入框 X(清空) 修改
    .rc-calendar-clear-btn {
        width: 26px;
    }
    .rc-calendar-clear-btn:after {
        content: "\e6db";
        font-family: iconfont;
        color: #007ace;
        width: 26px;
        &:hover {
            color: #005895;
        }
    }
}

.datepicker-wrapper-disabled{
    .datepicker-input-group.u-input-group{
        cursor: default;
        input.u-form-control{
            cursor: text;
        }
    }
}
